<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useThemeStoreHook } from '@/store'

const { toggle } = useThemeStoreHook()
const { theme } = storeToRefs(useThemeStoreHook())
</script>

<template>
  <div class="useTheme-container">
    <slot :theme="theme" :toggle="toggle"></slot>
  </div>
</template>

<style>
.useTheme-container {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: space-around;
}
</style>
